<template>
  <div>
    <div id="part_one">
      <div>
        <span class="part_one_span">订单编号:</span>
        <el-input v-model="form.name"></el-input>
      </div>
      <div>
        <span class="part_one_span">客户姓名:</span>
        <el-input v-model="form.name"></el-input>
      </div>
      <div>
        <span class="part_one_span">单位:</span>
        <el-input v-model="form.name"></el-input>
      </div>
      <div>
        <span class="part_one_span">订单日期:</span>
        <el-date-picker v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="">
        </el-date-picker>
      </div>
    </div>
    <div id="part_two">
      <el-button type="primary" @click="onSubmit">导出到Excel</el-button>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-button type="primary" icon="el-icon-refresh-left">重置</el-button>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="未审核" name="first">
          <el-table :data="tableData"
                    border>
            <el-table-column prop="date"
                             label="订单编号"
                             width="180">
            </el-table-column>
            <el-table-column prop="name"
                             label="单位"
                             width="180">
            </el-table-column>
            <el-table-column prop="qu"
                             label="姓名"
                             width="180">
            </el-table-column>
            <el-table-column prop="khjb"
                             label="客户级别">
            </el-table-column>
            <el-table-column prop="cjsj"
                             label="创建时间">
            </el-table-column>
            <el-table-column prop="cplx"
                             label="产品类型">
            </el-table-column>
            <el-table-column prop="sl"
                             label="数量（张）">
            </el-table-column>
            <el-table-column prop="je"
                             label="金额">
            </el-table-column>
            <el-table-column prop="zfzt"
                             label="支付状态">
            </el-table-column>
            <el-table-column prop="sh"
                             label="审核">
            </el-table-column>
            <el-table-column prop="cz"
                             label="操作">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已支付" name="first1">
          <el-table :data="tableData"
                    border>
            <el-table-column prop="date"
                             label="订单编号"
                             width="180">
            </el-table-column>
            <el-table-column prop="name"
                             label="单位"
                             width="180">
            </el-table-column>
            <el-table-column prop="qu"
                             label="姓名"
                             width="180">
            </el-table-column>
            <el-table-column prop="khjb"
                             label="客户级别">
            </el-table-column>
            <el-table-column prop="cjsj"
                             label="创建时间">
            </el-table-column>
            <el-table-column prop="cplx"
                             label="产品类型">
            </el-table-column>
            <el-table-column prop="sl"
                             label="数量（张）">
            </el-table-column>
            <el-table-column prop="je"
                             label="金额">
            </el-table-column>
            <el-table-column prop="zfzt"
                             label="支付状态">
            </el-table-column>
            <el-table-column prop="sh"
                             label="审核">
            </el-table-column>
            <el-table-column prop="cz"
                             label="操作">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="未支付" name="first2">
          <el-table :data="tableData"
                    border>
            <el-table-column prop="date"
                             label="订单编号"
                             width="180">
            </el-table-column>
            <el-table-column prop="name"
                             label="单位"
                             width="180">
            </el-table-column>
            <el-table-column prop="qu"
                             label="姓名"
                             width="180">
            </el-table-column>
            <el-table-column prop="khjb"
                             label="客户级别">
            </el-table-column>
            <el-table-column prop="cjsj"
                             label="创建时间">
            </el-table-column>
            <el-table-column prop="cplx"
                             label="产品类型">
            </el-table-column>
            <el-table-column prop="sl"
                             label="数量（张）">
            </el-table-column>
            <el-table-column prop="je"
                             label="金额">
            </el-table-column>
            <el-table-column prop="zfzt"
                             label="支付状态">
            </el-table-column>
            <el-table-column prop="sh"
                             label="审核">
            </el-table-column>
            <el-table-column prop="cz"
                             label="操作">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="未通过" name="first3">
          <el-table :data="tableData"
                    border>
            <el-table-column prop="date"
                             label="订单编号"
                             width="180">
            </el-table-column>
            <el-table-column prop="name"
                             label="单位"
                             width="180">
            </el-table-column>
            <el-table-column prop="qu"
                             label="姓名"
                             width="180">
            </el-table-column>
            <el-table-column prop="khjb"
                             label="客户级别">
            </el-table-column>
            <el-table-column prop="cjsj"
                             label="创建时间">
            </el-table-column>
            <el-table-column prop="cplx"
                             label="产品类型">
            </el-table-column>
            <el-table-column prop="sl"
                             label="数量（张）">
            </el-table-column>
            <el-table-column prop="je"
                             label="金额">
            </el-table-column>
            <el-table-column prop="zfzt"
                             label="支付状态">
            </el-table-column>
            <el-table-column prop="sh"
                             label="审核">
            </el-table-column>
            <el-table-column prop="cz"
                             label="操作">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="审核完成" name="first4">
          <el-table :data="tableData"
                    border>
            <el-table-column prop="date"
                             label="订单编号"
                             width="180">
            </el-table-column>
            <el-table-column prop="name"
                             label="单位"
                             width="180">
            </el-table-column>
            <el-table-column prop="qu"
                             label="姓名"
                             width="180">
            </el-table-column>
            <el-table-column prop="khjb"
                             label="客户级别">
            </el-table-column>
            <el-table-column prop="cjsj"
                             label="创建时间">
            </el-table-column>
            <el-table-column prop="cplx"
                             label="产品类型">
            </el-table-column>
            <el-table-column prop="sl"
                             label="数量（张）">
            </el-table-column>
            <el-table-column prop="je"
                             label="金额">
            </el-table-column>
            <el-table-column prop="zfzt"
                             label="支付状态">
            </el-table-column>
            <el-table-column prop="sh"
                             label="审核">
            </el-table-column>
            <el-table-column prop="cz"
                             label="操作">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div id="part_four">
      <el-pagination background
                     layout="prev, pager, next"
                     :total="50">
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
 #part_one{
   display:flex;
   flex-wrap:nowrap;
   align-items:center;
   justify-content:space-around;
 }
 #part_one>div{
   display:inherit;
   align-items:inherit;
 }
 .part_one_span{
   width:90px;
   text-align:right;
   margin-right:5px;
 }
 #part_two{
  display:flex;
  justify-content:flex-end;
  padding-top:20px;
 }
 #part_four{
   display:flex;
   justify-content:center;
   margin-top:5px;
 }
</style>
<script>
  export default {
    data() {
      return {
        radio: '1',
        activeName: 'first',
        tableData: [{
          date: '2016-05-02',
          name: '',
          address: '',
          qu: '',


        }],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      handleClick() {
        alert('button click');
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }
</script>
